<template>
  <div class="node-container">
    <p><i class="el-icon-phone"></i>发布时间节点</p>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="150px"
      label-position="left"
    >
      <el-form-item label="请输入批次年份:" prop="name">
        <el-input
          type="text"
          :rows="8"
          placeholder="请输入内容"
          size="mini"
          clearable
          v-model="form.completionYear"
          style="width: 22%"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="请输入提前预警天数:" prop="name">
        <el-input
          type="text"
          :rows="8"
          placeholder="请输入内容"
          size="mini"
          clearable
          v-model="form.advance"
          style="width: 22%"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        v-for="(item, index) in rateArr"
        :key="index"
        :label="item.name"
      >
        <el-date-picker
          v-model="form['progressAt' + (index + 1)]"
          type="date"
          placeholder="请选择该阶段截止日期"
        >
        </el-date-picker>
      </el-form-item>
      <div class="node-footer">
        <el-button type="primary" @click="submitForm('form')">确定</el-button>
        <el-button type="success" @click="chongzhi()">重置</el-button>
      </div>
    </el-form>
    <p><i class="el-icon-d-arrow-right"></i>发布节点记录</p>
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%"
      class="eltable"
    >
      <el-table-column label="序号" type="index" width="120px" />
      <el-table-column label="批次年份" prop="completionYear" width="150px" />
      <el-table-column label="提前预警天数" prop="advance" width="150px" />
      <el-table-column label="发布人" prop="userName" width="150px" />
      <el-table-column label="各阶段完成时限" prop="recordContent">
        <template scope="scope">
          <span>准备工作-</span
          ><span v-if="scope.row.progressAt1">{{
            scope.row.progressAt1.split(" ")[0]
          }}</span
          ><span v-else>无限制</span> <span>基础准备-</span
          ><span v-if="scope.row.progressAt2">{{
            scope.row.progressAt2.split(" ")[0]
          }}</span
          ><span v-else>无限制</span> <span>编制方案-</span
          ><span v-if="scope.row.progressAt3">{{
            scope.row.progressAt3.split(" ")[0]
          }}</span
          ><span v-else>无限制</span> <span>咨询论证-</span
          ><span v-if="scope.row.progressAt4">{{
            scope.row.progressAt4.split(" ")[0]
          }}</span
          ><span v-else>无限制</span> <span>审查审核-</span
          ><span v-if="scope.row.progressAt5">{{
            scope.row.progressAt5.split(" ")[0]
          }}</span
          ><span v-else>无限制</span> <span>审批公告-</span
          ><span v-if="scope.row.progressAt6">{{
            scope.row.progressAt6.split(" ")[0]
          }}</span
          ><span v-else>无限制</span>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" width="200px" prop="createTime" />
      <el-table-column label="修改时间" width="200px" prop="updateTime" />
      <el-table-column
        label="操作 "
        width="250"
        fixed="right"
        prop="applyFiles"
      >
        <template scope="scope">
          <el-button
            type="warning"
            @click="handleUpdate(scope.row)"
            size="mini"
            plain
            ><i class="el-icon-edit"></i>编辑</el-button
          >
          <el-button
            type="danger"
            @click="handleDelete(scope.row.id)"
            size="mini"
            plain
            ><i class="el-icon-delete"></i>删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="tableData.length > 0"
      class="elpagi"
      :total="total"
      @size-change="getdata"
      @current-change="getdata"
      @prev-click="getdata"
      @next-click="getdata"
      :current-page.sync="listquery.currentPage"
      :page-size.sync="listquery.pageSize"
      layout="total, prev, pager, next, jumper"
    />

    <el-dialog
      title="节点记录编辑"
      :visible.sync="isDialogShow"
      width="30%"
      :append-to-body="true"
      class="dialog1"
    >
      <el-form
        ref="formlog"
        :model="formlog"
        :rules="rules"
        label-width="150px"
        label-position="left"
      >
        <el-form-item label="请输入批次年份:" prop="name">
          <el-input
            type="text"
            :rows="8"
            placeholder="请输入内容"
            size="mini"
            clearable
            v-model="formlog.completionYear"
            style="width: 70%"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="请输入提前预警天数:" prop="name">
          <el-input
            type="text"
            :rows="8"
            placeholder="请输入内容"
            size="mini"
            clearable
            v-model="formlog.advance"
            style="width: 70%"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          v-for="(item, index) in rateArr"
          :key="index"
          :label="item.name"
        >
          <el-date-picker
            v-model="formlog['progressAt' + (index + 1)]"
            type="date"
            placeholder="请选择该阶段截止日期"
          >
          </el-date-picker>
        </el-form-item>
        <div class="node-footer">
          <el-button type="primary" @click="updateData()">确定</el-button>
          <el-button type="success" @click="chongzhi1()">重置</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getlist, edit, add, del } from "@/api/yujing.js";
import { handleCofirm } from "@/utils/confirm";
export default {
  data() {
    return {
      rateArr: [
        { name: "准备工作", date: "" },
        { name: "基础调查", date: "" },
        { name: "编制方案", date: "" },
        { name: "咨询论证", date: "" },
        { name: "审查审核", date: "" },
        { name: "审批公告", date: "" },
      ],
      form: {
        completionYear: "",
        advance: "",
        progressAt1: "",
        progressAt2: "",
        progressAt3: "",
        progressAt4: "",
        progressAt5: "",
        progressAt6: "",
      },
      formlog: {
        completionYear: "",
        advance: "",
        progressAt1: "",
        progressAt2: "",
        progressAt3: "",
        progressAt4: "",
        progressAt5: "",
        progressAt6: "",
      },
      rules: {
        completionYear: [
          { required: true, message: "请输入批次年份", trigger: "blur" },
        ],
        advance: [
          { required: true, message: "请输入提前预警天数", trigger: "blur" },
        ],
      },
      tableData: [],
      total: "",
      listquery: {
        currentPage: 1,
        pageSize: 5,
      },
      isloading: false,
      isDialogShow: false,
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const temp = Object.assign({}, this.form);
          add(temp)
            .then((v) => {
              this.getdata();
              this.$notify({
                title: "成功",
                message: "添加成功",
                type: "success",
              });
            })
            .catch((e) => {
              this.$message.error(e.response.data.message);
            });
        } else {
          return false;
        }
      });
    },
    handleUpdate(row) {
      this.formlog = Object.assign({}, row); // copy obj

      this.isDialogShow = true;
      this.$nextTick(() => {
        this.$refs["formlog"].clearValidate();
      });
    },
    updateData() {
      this.$refs["formlog"].validate((valid) => {
        if (valid) {
          edit(this.formlog).then(() => {
            this.getdata();
            this.isDialogShow = false;
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },
    handleDelete(id) {
      handleCofirm("确认要删除吗？", "warning").then((res) => {
        del(id)
          .then((v) => {
            this.getdata();
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
            });
            this.isDialogShow = false;
          })
          .catch((error) => {
            this.$notify.error({
              title: "错误",
              message: error,
            });
          });
      });
    },
    chongzhi() {
      this.form = {
        completionYear: "",
        advance: "",
        progressAt1: "",
        progressAt2: "",
        progressAt3: "",
        progressAt4: "",
        progressAt5: "",
        progressAt6: "",
      };
    },
    chongzhi1() {
      this.formlog = {
        completionYear: "",
        advance: "",
        progressAt1: "",
        progressAt2: "",
        progressAt3: "",
        progressAt4: "",
        progressAt5: "",
        progressAt6: "",
      };
    },
    async getdata() {
      this.isloading = true;
      let res = await getlist(this.listquery);
      this.tableData = res.data.content;
      this.total = res.data.totalElements;
      this.isloading = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../public/css/table.scss";
.node-container {
  width: 100%;
  height: 100%;
  background-color: #fff;
  margin: 5px;
  padding: 5px;

  p {
    background-color: #deecf9;
    line-height: 25px;
    margin: 0;
    font-weight: 600;
    i {
      margin-right: 10px;
    }
  }

  .node-footer {
    margin-top: 15px;
    margin-bottom: 10px;
  }
}
</style>
